<template>
  <div class="lineEcharts">
    <div :id="elId"></div>
  </div>
</template>
<script>
  let echarts = require('echarts/lib/echarts')
  // 引入折线图组件
  require('echarts/lib/chart/line')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  //引入uuid文件
  import uuidv1 from 'uuid/v1'
  export default {
    props: {
      xAxis: {       //x轴的显示数据，参数名可以自己定义；
        type: Array,
        default() {
          return []
        }
      },
      opData: Array, //用来配置series的系列列表，参数可以自己定义；
      title: Array, //图表系列标记，参数可以自己定义
    },
    data() {
      return {
        elId: '',
        yAxisData:[]
      }
    },
    watch: {
      opData: {
        handler(curVal, oldVal) {
          //console.log('sdasd')
          this.initChart();
        },
        deep:true
      }
    },
    created() {
      this.getYAxis(); 
      this.elId = uuidv1() //获取随机id
    },
    mounted() {
      this.initChart();
      //console.log(this.yAxisData)
    },

    methods: {
      getYAxis() {
        this.yAxisData = [];
        let borderColor = ['red', '#0000ee', '#ff00ff', '#00cc00', '#ff9900', '#993399'];
        //console.log(this.title)
        for (let ind in this.title) {
          if (ind % 2 == 0) {   //当为偶数时（即 0 2 4）
            this.yAxisData.push({
              type: "value",
              name: "",
              position: 'left',
              offset: Math.floor(ind / 2) * 40,
              axisLine: {
                lineStyle: {
                  color: borderColor[ind]
                }
              },
            })
          } else {      //当为奇数数时（即 1 3 5）
            this.yAxisData.push({
              type: "value",
              name: "",
              position: 'right',
              offset: Math.floor(ind / 2) * 40,
              axisLine: {
                lineStyle:{
                  color: borderColor[ind]
                }
              },
            })
          }
       
        }
      },
      initChart() {
        let chartView = echarts.init(document.getElementById(this.elId))
        chartView.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {    //图例样式
            data: this.title
          },
          grid: {                   //折线位置
            top: '8%',
            right: '15%',
            left: '15%'
          },
          xAxis: {                  //x轴样式
            type: 'category',
            boundaryGap: true,
            data: this.xAxis
          },
          yAxis: this.yAxisData,
          calculable: true,
          color: ["red", "#0000ee", '#ff00ff','#00cc00', '#ff9900', '#993399'], //折线颜色
          series: this.opData
        })
        window.addEventListener('resize', function () {
          chartView.resize()
        })
      }
    },

    beforeDestroy() {
      if (this.chartView) this.chartView.clear();
    },

  }
</script>

<style scoped>
  .lineEcharts > div {
    width: 100%;
    min-height: 200px;
    height: 100%;
    box-sizing: border-box;
  }
</style>
